<template>
  <div class="register_box">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>商家入驻</span>
      </div>
      <div>
        <el-form ref="form" :model="registerForm" :rules="registerFormRules" label-width="80px">
          <el-form-item label="店铺名称" prop="username">
            <el-input v-model="registerForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" prop="username">
            <el-input v-model="registerForm.userAddress"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="Login" class="btnNot">取 消</el-button>
            <el-button type="warning" @click="merchantRegister()">点击注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //登录表单的数据绑定对象
      registerForm: {
        userName: "",
        userAddress: ""
      },
      registerFormRules: {
        userName: [
          { required: true, message: "请输入店铺名", trigger: "blur" }
        ],
        userAddress: [
          { required: true, message: "请输入店铺地址", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    merchantRegister() {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      let userName = that.registerForm.userName;
      let userAddress = that.registerForm.userAddress;
      that.$axios
        .post(
          "/user/userUpdate?userId=" +
            userId +
            "&userName=" +
            userName +
            "&userAddress=" +
            userAddress,
          {}
        )
        .then(function(response) {
          console.log(response);
          alert("注册成功！");
          localStorage.clear();
          that.$router.push("/login");
          window.location.reload(true);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
     Login() {
      var that = this;
      that.$router.push("/");
    },
  }
};
</script>

<style lang="less" scoped>
.register_box {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.register_box .el-card {
  border: 0px;
}
.box-card {
  width: 480px;
}
.clearfix {
  clear: both;
  font-size: 18px;
  font-weight: bold;
}
.otherLogin {
  display: flex;
  flex-direction: row;
}
.other {
  margin-right: 10px;
  color: #999;
}
.btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
</style>